The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note:
z-index only works on positioned elements:
- position: absolute
- position: relative
- position: fixed
- position: sticky
w3schools.com/cssref/pr_pos_z-index.asp
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
The viewport is the user's visible area of a web page.
The viewport varies with the device,
and will be smaller on a mobile phone than on a computer screen.
w3schools.com/css/css_rwd_viewport.asp
There are four viewport based units in CSS.
These are vh, vw, vmin and vmax .
Viewport Height (vh) — This unit is based on the height of the viewport. ...
A value of 1vw is equal to 1% of the viewport width.
Viewport Minimum (vmin) — This unit is based on the smaller dimension of the viewport.
sitepoint.com/css-viewport-units-quick-start/
1vh = 1% of viewport height.
Vezi "CSS Units": w3schools.com/cssref/css_units.asp
The viewport is the area where the browser renders the site.
This is your screen minus the reserved space of the browser chrome.
Sometimes you want to size an element based on that viewport, like a sidebar.
This can be done using a unit we’re all familiar with: percentages.
The viewport units are a new set of units designed for the challenges we face today.
One-pagers, full-width grids, typography, and many other things rely on the size of the viewport.
Previously, we hacked these challenges using percentages as mentioned earlier, or JavaScript.
This new set of units consists of four different units.
Two for each axis, and a minimum and maximum value of the two.
- vw: 1%th viewport width (1% de la largeur de la fenêtre)
- vh: 1%th viewport height (1% de la hauteur de la fenêtre)
- vmin: 1%th of the smallest side (1vw ou 1VH, soit la valeur la plus petite)
- vmax: 1%th of the largest side (1vw ou 1VH, soit la valeur la plus grande)
Note:
IE9 uses vm instead of vmin. It does not support vmax.
Just to clarify:
1vmax equals 1vh in portrait mode,
whilst in landscape mode, 1vmax will equal 1vw.
web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
CSS3 a de nouvelles valeurs pour le dimensionnement des objets
par rapport à la taille actuelle de la fenêtre:
VW, VH, et vmin.
Elles permettent entre autres d'avoir une taille de police et des colonnes variables
selon la résolution de l'écran.
Lors de la réduction du corps de la fenêtre
votre titre se réduira suivant le schéma initialement prévu.
L'unité de vh signifie "hauteur de la fenêtre",
vw pour viewport width, et
vmin représente celui des vh ou vw est la plus courte longueur.
Les valeurs utilisées peuvent être quelque peu déroutantes
si vous n'avez pas utilisé ces unités avant.
1VH représente 1% de la fenêtre courante
(la zone de contenu de la fenêtre du navigateur) de hauteur,
au lieu de 100% comme vous pouvez vous y attendre.
Donc si vous voulez un élément à la hauteur de votre fenêtre,
vous devrez le mettre à 100vh.
Bien sûr VW fonctionne exactement de la même manière que les unités de VH.
En résumé:
Les unités de fenêtres sont dynamiques plutôt que statiques,
donc si vous redimensionnez la fenêtre du navigateur,
la valeur calculée des unités changera également.
Si par exemple la fenêtre de votre navigateur est 1000px de large,
et l'élément d'une largeur de 10vw sera 100px de large.
Si vous réduisez la fenêtre du navigateur pour seulement 100px de large,
la largeur de l'élément sera redimensionné avec elle pour 10px de large.
Le réglage de la hauteur et largeur des éléments,
pour correspondre à la taille de la fenêtre du visiteur, devient trivial.
Exemple de code:
zone > section {
column-width: 15em;
column-gap: 1.6rem;
height: 80vh;
width: 80vw;
overflow: scroll;
}
Ceci définit la hauteur à 80% de la hauteur de la fenêtre,
et la largeur à 80% de la largeur de la fenêtre.
La largeur de chaque colonne est réglée pour être idéalement 22rem (220px dans ce cas) de large,
mais le navigateur peut ajuster selon la nécessité.
Enfin, le débordement est mis en défilement
afin que des colonnes supplémentaires soient cachées
et puissent être parcourues selon leur apparition,
plutôt que de déborder vers la droite,
et potentiellement chevaucher tout élément que nous plaçons là.
Grace à ceci vous aurez un début de design sensible aux redimensionnements
correspondant totalement à la vision voulue
sans avoir à toucher aux pourcentages de chaque élément.